<template>
  <div class="mysales">
    <c-title text="我的销售" :hide="false"></c-title>
    <van-tabs v-model="active" title-active-color="#F15353" @change="tabChange">
      <van-tab title="今日数据"></van-tab>
      <van-tab title="昨日数据"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis">
        <span>{{ info.order_amount }}</span>
        <span class="txt">销售额（元）</span>
      </div>
      <div class="lis">
        <span>{{ info.goods_count }}</span>
        <span class="txt">销售商品（件）</span>
      </div>
      <div class="lis">
        <span>{{ info.reward_amount }}</span>
        <span class="txt">收入（元）</span>
      </div>
      <div class="lis">
        <span>{{ info.share_log }}</span>
        <span class="txt">分享次数（次）</span>
      </div>
      <div class="lis">
        <span>{{ info.customer_count }}</span>
        <span class="txt">下单访客（人）</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      info: []
    };
  },
  activated() {
    this.active = "0";
    this.getData();
  },
  methods: {
    tabChange() {
      this.getData();
    },

    async getData() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.self-sales.summary", { time_type: this.active }, "");
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0.63rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 0.5rem;
  padding-top: 1rem;
  box-sizing: border-box;
  .lis {
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 1rem;
    font-size: 0.94rem;
    color: #00001c;
    font-weight: bold;
    .txt {
      font-weight: 400;
      font-size: 0.75rem;
      color: #6e6e79;
      margin-top: 0.2rem;
    }
  }
}
</style>
